<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有key</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">
    <h1> key:一般都是唯一值 </h1>
    <span v-for="(user,index) in users" >
        <input type="checkbox">{{user.userName}},{{index}},<button @click="del(index)" >delete</button><br/>
    </span>
    <br/>
    <button @click="addUser">新增user</button>
</div>

</body>

<script>
    const app = {
        data() {
            return {
                users:[
                    {userName:'张三1',age:22,password:'123456'},
                    {userName:'张三2',age:22,password:'123456'},
                    {userName:'张三3',age:22,password:'123456'},
                    {userName:'张三4',age:22,password:'123456'},
                    {userName:'张三5',age:22,password:'123456'},
                    {userName:'张三6',age:22,password:'123456'}
                ]
            }
        },
        methods: {
            addUser(){
                //this.users.push({userName:'张三'+(this.users.length+1),age:22,password:'123456'}) //在数组头部添加一条数据
                this.users.unshift({userName:'张三'+(this.users.length+1),age:22,password:'123456'}) //在数组尾部添加一条数据
            },
            del(e){
                this.users.splice(e,1) //splice:代表删除N条数据
            }
        }
    }

    Vue.createApp(app).mount('#app')

</script>

</html>